<template>
  <div class="content">
    <van-nav-bar
      title="登录"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
      class="top"
    />
    <div class="body">
      <div class="box1">
        <input type="text" placeholder="请输入手机号码" v-model="phone" />
        <span @click="Code">获取短信验证码</span>
      </div>
      <div class="box2">
        <input type="text " placeholder="请输入验证码" v-model="smsCode" />
      </div>
    </div>
    <input type="button" value="短信登录" class="er" @click="login" />
  </div>
</template>

<script>
import $axios from "axios";
export default {
  data() {
    return {
      phone: "",
      smsCode: "",
      token: "",
    };
  },
  methods: {
    onClickLeft() {
      history.back();
    },
    Code() {
      if (this.phone.length === 11) {
        $axios
          .get("http://huruqing.cn:3003/user/getSmsCode?phone=" + this.phone)
          .then((res) => {
            alert(res.data.msg);

            this.smsCode = res.data.smsCode;
          });
      } else {
        alert("请输入正确的手机号码");
      }
    },
    login() {
      $axios
        .post(
          "http://huruqing.cn:3003/user/login?phone=" +
            this.phone +
            "&&smsCode=" +
            this.smsCode
        )
        .then((res) => {
          console.log(res.data.result.token);
          this.$store.commit("set_phone", this.phone);
          this.$store.commit("set_token", res.data.result.token);
          this.$router.go(-1);
        });
    },
  },
};
</script>

<style scoped>
* {
  padding: 0;
  margin: 0;
  background-color: rgb(244, 244, 244);
}

.body {
  background-color: white;
  width: 100%;
  height: 630px;
  margin-top: 5px;
  position: relative;
}

.body .box1 {
  background-color: white;
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 40px;
  padding-right: 40px;
  border-bottom: 1px solid rgb(999, 999, 999);
}
.body .box1 input {
  width: 70%;
}
.body .box1 span {
  background-color: white;
  width: 10%px;
  font-size: 12px;
}

.body .box2 {
  background-color: white;
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 40px;
  padding-right: 40px;
  border-bottom: 1px solid rgb(999, 999, 999);
}

input {
  border: none;
  width: 100%;
  background-color: white;
  height: 30px;
}

.er {
  position: absolute;
  height: 50px;
  top: 30%;
  background-color: rgb(192, 49, 49);
  color: white;
  width: 80%;
  margin-left: 45px;
}

a {
  width: 100%;
  height: 50px;
  text-decoration: none;
  color: black;
  background-color: white;
  display: flex;
  align-items: center;
}
.top {
  background-color: #fff;
}
</style>